import Image from "next/image"
import { BsFillPlayFill } from "react-icons/bs"
import { FavoriteButton } from "./FavoriteButton"
import { useRouter } from "next/navigation"

interface MovieCardProps {
    data: Record<string, any>
}

export const MovieCard = ({ data }: MovieCardProps) => {
    const router =useRouter()
    return (<>
        <div className="group bg-zinc-900 col-span relative rounded-md  h-[12vw]">
            <Image className="cursor-pointer object-cover transition  duration shadow-xl rounded-md group-hover:opacity-90 sm:group-hover:opacity-0 h-[12vw] w-full delay-300" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" layout="fill" objectFit="cover" src={data.thumbnailUrl} alt="Thumbnail" />
            <div className="opacity-0 absolute top-0 transition duration-200 z-10 invisible sm:visible delay-300 w-full scale-0 group-hover:scale-110 group-hover:-translate-y-[6vw]  translate-x-[2vw] group-hover:opacity-100">
                <div className="h-[12vw] w-full">
                    <Image className="cursor-pointer object-cover transition  duration shadow-xl rounded-t-md " sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" layout="fill" src={data.thumbnailUrl} alt="Thumbnail1" />
                </div>
                <div className="z-10 bg-zinc-800 p-2 lg:p-4 absolute w-full transition shadow-md rounded-b-md">
                    <div className="flex flex-row items-center gap-3">
                        <div className="cursor-pointer w-6 h-6 lg:w-10 lg:h-10 bg-white  items-center rounded-full flex justify-center  transition hover:bg-neutral-300" onClick={() => router.push(`/watch/${data.id}`)}>
                            <BsFillPlayFill className="text-black" size={30} />
                        </div>
                        <FavoriteButton movieId={data.id} />
                    </div>
                    <p className="text-green-400 font-semibold mt-4">
                        New <span className="text-white">2023</span>
                    </p>
                    <div className="flex flex-row mt-4 gap-2 items-center">
                        <p className="text-white text-[10px] lg:text-sm">{data.duration}</p>
                    </div>
                    <div className="flex flex-row mt-4 gap-2 items-center">
                        <p className="text-white text-[10px] lg:text-sm">{data.genre}</p>
                    </div>
                </div>
            </div>
        </div>
    </>)
}